<template>
<!--  团支书信息-->
  <template v-if="active===0" :key="stateIndex" >
    <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
      <el-table-column label="团支书基本信息">
        <el-table-column
            type="selection" width="50px">
        </el-table-column>
        <el-table-column prop="account" label="账号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="mng_class" label="所属班级">
        </el-table-column>
        <el-table-column prop="info" label="信息">
        </el-table-column>
        <el-table-column
            align="center">
          <template #header>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd,drawer = true"
                       circle></el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="searchbox" circle></el-button>
            <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name -->
            <transition name="mybox">
              <el-input
                  class="sear"
                  v-model="search"
                  size="mini"
                  v-show="searchshow"
                  placeholder="输入关键字搜索"/>
            </transition>
          </template>
          <template #default="scope">
            <el-button
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row),drawerupdate = true"></el-button>
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row),delSubmit"></el-button>
            <el-button
                size="mini"
                @click="handleView(scope.$index, scope.row);active=1">查看班级学生</el-button>
          </template>
        </el-table-column>
      </el-table-column>


    </el-table>
  </template>
  <template v-if="active===1"><student-of-the-youth-league-party-secretary v-bind:YouthLeaguePartySecretaryBiographyStudent="YouthLeaguePartySecretaryBiographyStudent" @change="costPlannedAmountChange($event)"/></template>

<!--新增数据-->
  <el-drawer
      title="新增数据"
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose" destroy-on-close>
    <el-form ref="ruleFormsss" :model="AddPartySecretary" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="AddPartySecretary.name"></el-input>
      </el-form-item>
      <el-form-item label="所属班级">
        <el-select v-model="AddPartySecretary.mng_class" placeholder="请选择所属班级">
                    <el-option label="B200601" value="B200601"></el-option>
                    <el-option label="B200602" value="B200602"></el-option>
                    <el-option label="B200603" value="B200603"></el-option>
                  </el-select>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="AddPartySecretary.account" type="number" ></el-input>
      </el-form-item>
      <el-form-item label="信息">
        <el-input v-model="AddPartySecretary.info"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
<!--  修改数据-->
  <el-drawer
      title="修改数据"
      v-model="drawerupdate"
      ref="drawerupdate"
      :direction="direction"
      :before-close="handleClose" destroy-on-close>
    <el-form ref="ruleFormsss" :model="EditPartySecretary" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="EditPartySecretary.name"></el-input>
      </el-form-item>
      <el-form-item label="所属班级">
        <el-select v-model="EditPartySecretary.mng_class" placeholder="请选择所属班级">
          <el-option label="B200601" value="B200601"></el-option>
          <el-option label="B200602" value="B200602"></el-option>
          <el-option label="B200603" value="B200603"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="EditPartySecretary.account" type="number" ></el-input>
      </el-form-item>
      <el-form-item label="信息">
        <el-input v-model="EditPartySecretary.info"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editStudentInfo_Submit">立即修改</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

</template>
<script lang="ts">
import {getCurrentInstance, reactive, ref, unref} from "vue";
import {getAllStudentInfo} from "@/network/admin/getAllStudentInfo";
import {ElMessage} from "element-plus";
import qs from "qs";
import {addStudentInfo} from "@/network/admin/addStudentInfo";
import {getLocalPartySecretary} from "@/network/admin/getLocalPartySecretary";
import {getLocalStudentAgreeAllApply} from "@/network/manager/getLocalStudentAgreeAllApply";
import StudentOfTheYouthLeaguePartySecretary
  from "@/views/admin/childComps/LeaguePartySecretaryInformationList/StudentOfTheYouthLeaguePartySecretary.vue";
import {ModifyThePartySecretary} from "@/network/admin/ModifyThePartySecretary";
import {DeleteThePartySecretary} from "@/network/admin/DeleteThePartySecretary";
import {AddPartySecretarys} from "@/network/admin/AddPartySecretarys";

export default {
  name:'LeaguePartySecretaryInformation',
  data(){
    return{
      drawer: false,
      drawerupdate: false,
      searchshow: false,
      direction: 'rtl',
      tableData: [{
        name: 'lwj',
        mng_class: 'B200601',
        account: '2020000',
        info: 'sdsda',
        SuperAdmin: 'asdasd',
        id:'2020'
      },{
        name:'fk',
        id:'2021'
      }],
      search: '',
      active:0,
      YouthLeaguePartySecretaryBiographyStudent:'',
      editPower:false,
      stateIndex:0
    }
  },
  components:{
    StudentOfTheYouthLeaguePartySecretary,
  },
  setup(){
    const ruleFormsss = ref(null);
    const {proxy}:any = getCurrentInstance();
    // const router=useRouter();
    // 定义变量
    const AddPartySecretary = reactive({
      name: '',
      mng_class: '',
      account: '',
      info:'',
      SuperAdmin: ''
    })
    const EditPartySecretary = reactive({
      name: '',
      mng_class: '',
      account: '',
      info: '',
      SuperAdmin: ''
    })
    const statePartySecretary = reactive({
      index: '',
      id: ''
    })

    function handleClose(done) {
      proxy.$confirm('确认？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }

    function handleClose1(done) {
      proxy.$confirm('请确认是否提交该学生信息？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }
    const Admin_id=localStorage.getItem('AdminId')
    console.log(Admin_id)

    //获取团支书列表
    getLocalPartySecretary().then((result) => {
      //前后端连接成功
      console.log("前后端连接成功")
      const msg = result.data.msg;
      //打印返回结果状态，
      if (result.data.status == 1) {
        ElMessage.error(msg);
      } else {
        //打印后端获取的用户列表数据
        console.log(result.data.result)
        proxy.tableData = result.data.result
        console.log(proxy.tableData)
        // console.log(msg)
        // ElMessage.success({
        //   message:msg,type:'success'});

      }
    }).catch(() => {

      console.log("获取列表失败")
      const msg = "获取列表失败！请稍后尝试！";
      ElMessage.error(msg);
    })

    const searchbox = () => {
      proxy.searchshow = !proxy.searchshow
    }

//添加团支书
    const onSubmit = async () => {
      const form = unref(ruleFormsss);
      const AddPartySecretary_data = qs.stringify(AddPartySecretary)
      if (!form) return
      try {
        //数据打印
        console.log(AddPartySecretary_data)

        proxy.$confirm('此操作将添加该团支书信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          AddPartySecretarys(AddPartySecretary_data).then(result => {
            //前后端连接成功
            console.log("前后端连接成功")
            const msg = result.data.msg;
            //打印返回结果状态，
            if (result.data.status == 1) {
              ElMessage.error(msg);
              proxy.drawer = false
            } else {
              console.log(msg)

              proxy.tableData.splice(100, 1, proxy.AddPartySecretary)
              proxy.drawer = false
              window.location.href = 'http://localhost:8080/f';
              ElMessage.success({
                message: msg, type: 'success'
              });
            }
          }).catch(err => {

          })
          // proxy.$message({
          //   type: 'success',
          //   message: '添加成功!'
          // });
        }).catch(() => {
          proxy.$message({
            type: 'info',
            message: '已取消添加'
          });
        });

        console.log("成功发送添加请求")

      } catch (error) {
      }
    }




//修改团支书信息
    function handleEdit(index, row) {
      console.log(index, row);
      console.log(row.name)

      EditPartySecretary.name=row.name
      EditPartySecretary.mng_class=row.mng_class
      EditPartySecretary.account=row.account
      EditPartySecretary.info=row.info
      proxy.statePartySecretary.index=index
      proxy.statePartySecretary.id=row.mid

    }
    //修改团支书信息
    const editStudentInfo_Submit = (index=proxy.statePartySecretary.index,id=proxy.statePartySecretary.id) => {
      console.log(id)
      const form = unref(ruleFormsss);
      const EditPartySecretary_data=qs.stringify(proxy.EditPartySecretary)


      if (!form) return
      try {
        console.log(EditPartySecretary_data)
        ModifyThePartySecretary(id, EditPartySecretary_data).then((result) => {

          const msg = result.data.msg;
          //打印返回结果状态，
          if (result.data.status == 1) {
            ElMessage.error(msg);
          } else {
            // proxy.$set(proxy.EditPartySecretary,index,1)
           proxy.tableData.splice(index, 1, proxy.EditPartySecretary)
            proxy.drawerupdate = false
           // console.log(proxy.stateIndex)
           // proxy.stateIndex+=1

            console.log("yes")
            window.location.href = 'http://localhost:8080/f';
            console.log(msg)
            ElMessage.success({
              message: msg, type: 'success'
            });

          }
        }).catch(() => {

          console.log("no")
          const msg = "更新失败！请稍后尝试！";
          ElMessage.error(msg);
        })

        //
        console.log("成功发送更新请求")
        proxy.$forceUpdate()

      } catch (error) {
      }
    }


    //删除团支书信息
    function handleDelete(index, row) {
      console.log(index, row);
      //代理获取属性
      const proxydata = new Proxy(row, {
        get(target, key, receiver) {
          const result = Reflect.get(target, key, receiver)
          console.log('get', key)
          return result
        }
      })
      proxydata.mid;
      console.log(proxydata.mid)
      const params = proxydata.mid
      proxy.$confirm('此操作不可逆，将删除该团支书的所有记录及其下属学生, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteThePartySecretary(params).then(result => {
          proxy.tableData.splice(index, 1)
        }).catch(err => {

        })
        proxy.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        proxy.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
   //查看团支书
    function handleView(index, row) {
      console.log(index, row)
      console.log("团支书ID："+row.mid)//获取id
      proxy.YouthLeaguePartySecretaryBiographyStudent=row.mid
      const LocalLeaguePartySecretaryInformation_id=row.mid
      getLocalStudentAgreeAllApply(LocalLeaguePartySecretaryInformation_id).then(result=>{
        console.log(result.data.result)
        proxy.tableDataAgree=result.data.result

        const msg = result.data.msg;
        //打印返回结果状态，
        if (result.data.status == 1) {
          ElMessage.error(msg);
        } else {
          console.log(msg)
          ElMessage.success({
            message: msg, type: 'success'
          });

        }

      }).catch(err=>{
        console.log("查看团支书详情失败")
        const msg = "查看团支书详情失败！请稍后尝试！";
        ElMessage.error(msg);
      })
    }


    function costPlannedAmountChange(value){
console.log(value)
      proxy.active=0
    }

    return{
      AddPartySecretary,
      EditPartySecretary,
      onSubmit,
      editStudentInfo_Submit,
      ruleFormsss,
      handleEdit,
      handleDelete,
      getAllStudentInfo,
      searchbox,
      statePartySecretary,
      handleClose,
      handleClose1,
      handleView,
      costPlannedAmountChange
    }
  }
}
</script>
<style>
.sear {
  overflow: hidden;
  width: 200px;
  background-color: rgb(245, 224, 224);
  margin-bottom: -9px;
  margin-left: 0px;
  border-radius: 30px;
}

/* 给过渡的name加样式 */

.mybox-leave-active,
.mybox-enter-active {
  transition: all 1s ease;
}

.mybox-leave-active,
.mybox-enter {
  width: 0px !important;
}

.mybox-leave,
.mybox-enter-active {
  width: 200px;
}

</style>
